<template>
  <div id="router_guide">
    <el-menu router default-active="/" mode="horizontal">
      <el-row>
        <el-col :span="3" v-if="subtitle !== ''">
          <span class="subtitle">{{ subtitle }}</span>
        </el-col>
        <el-col :span="5">
          <el-dropdown class="dropdown" @command="changePosition">
              <span class="el-dropdown-link">
                {{ cities.chosen }}
                <em class="el-icon-arrow-down el-icon--right"></em>
              </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :command="item" v-for="item in cities.availableCities" :key="item">
                  {{ item }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-col>
      </el-row>
      <el-row>
        <el-tooltip content="回到首页" effect="light">
          <el-menu-item index="/" class="router">
            <el-image :src="imageSrc" class="title"></el-image>
          </el-menu-item>
        </el-tooltip>
        <el-tooltip content="采购" effect="light">
          <el-menu-item index="/merchants/null" class="router">现货采购</el-menu-item>
        </el-tooltip>
        <el-menu-item class="router">期货预定</el-menu-item>
        <el-menu-item class="router">出塘价分析</el-menu-item>
        <el-menu-item class="router">行情动态</el-menu-item>
        <el-menu-item class="router">实验室安检平台</el-menu-item>
        <el-menu-item>
          <template v-if="user.hasLogin" class="user">
            <el-avatar :src="user.userInfo.getIcon()" shape="square"></el-avatar>
            <span style="padding-left: 5px">{{ user.userInfo.getName() }}</span>
          </template>
          <template v-else>
            <el-button>登录/注册</el-button>
          </template>
        </el-menu-item>
      </el-row>
    </el-menu>
  </div>
</template>

<script>

export default {
  name: "RouterGuide",
  data() {
    return {
      user: {
        userInfo: this.$loginController.getUserInfo(),
        hasLogin: this.$loginController.getHasLogin()
      },
      cities: {
        availableCities: ["上海", "杭州", "南京", "宁波"],
        chosen: "上海"
      },
      imageSrc: require("@/assets/logo.png")
    };
  },
  props: {
    subtitle: String
  },
  methods: {
    changePosition(city) {
      this.cities.chosen = city;
      this.$store.commit("setGlobalPosition", city);
    }
  },
  mounted() {
    this.cities.chosen = this.$store.getters.getGlobalPosition;
  }
}

</script>

<style scoped>

.router {
  width: 14%;
}

.user {
  background-color: green;
}

.title {
  width: 100%;
  height: 50px;
}

.subtitle {
  font-size: 18px;
  font-weight: 480;
  padding-top: 20px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.dropdown {
  padding-left: 4px;
  padding-top: 10px;
}
</style>